<template>
	<div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
		<WtmSearcher v-if="searchBar" v-model="searchData" @search="getTableData" :showToggleAdvanced="true" :defaultExpandAdvanced="false">
			<template #primary="{ showAdvanced }">
				<el-row :gutter="15">
					<!-- 常用搜索条件 -->
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="SchemeName_FormItem" prop="SchemeName">
							<template #label>
								<WtmLabelTooltip label="方案名称" tooltip="社保方案名称（如：一类、二类）" />
							</template>
							<el-input v-model="searchData.SchemeName" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="SchemeCode_FormItem" prop="SchemeCode">
							<template #label>
								<WtmLabelTooltip label="方案编码" tooltip="社保方案编码" />
							</template>
							<el-input v-model="searchData.SchemeCode" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="PaymentArea_FormItem" prop="PaymentArea">
							<template #label>
								<WtmLabelTooltip label="缴纳地区" tooltip="社保缴纳所在地区" />
							</template>
							<el-input v-model="searchData.PaymentArea" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="IsEnabled_FormItem" prop="IsEnabled">
							<template #label>
								<WtmLabelTooltip label="是否启用" tooltip="是否启用该方案" />
							</template>
							<el-select v-model="searchData.IsEnabled" clearable>
								<el-option :key="1" :value="true" :label="$t('message._system.common.vm.tips_bool_true')"></el-option>
								<el-option :key="0" :value="false" :label="$t('message._system.common.vm.tips_bool_false')"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<!-- 可展开的详细搜索条件 -->
					<template v-if="showAdvanced">
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="SocialSecurityBase_FormItem" prop="SocialSecurityBase">
								<template #label>
									<WtmLabelTooltip label="社保缴费基数" tooltip="社保缴费基数" />
								</template>
								<el-input-number v-model="searchData.SocialSecurityBase" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="PensionPersonal_FormItem" prop="PensionPersonal">
								<template #label>
									<WtmLabelTooltip label="养老保险个人" tooltip="养老保险个人缴费" />
								</template>
								<el-input-number v-model="searchData.PensionPersonal" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="PensionCompany_FormItem" prop="PensionCompany">
								<template #label>
									<WtmLabelTooltip label="养老保险单位" tooltip="养老保险单位缴费" />
								</template>
								<el-input-number v-model="searchData.PensionCompany" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="MedicalPersonal_FormItem" prop="MedicalPersonal">
								<template #label>
									<WtmLabelTooltip label="医疗保险个人" tooltip="医疗保险个人缴费" />
								</template>
								<el-input-number v-model="searchData.MedicalPersonal" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="MedicalCompany_FormItem" prop="MedicalCompany">
								<template #label>
									<WtmLabelTooltip label="医疗保险单位" tooltip="医疗保险单位缴费" />
								</template>
								<el-input-number v-model="searchData.MedicalCompany" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="UnemploymentPersonal_FormItem" prop="UnemploymentPersonal">
								<template #label>
									<WtmLabelTooltip label="失业保险个人" tooltip="失业保险个人缴费" />
								</template>
								<el-input-number v-model="searchData.UnemploymentPersonal" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="UnemploymentCompany_FormItem" prop="UnemploymentCompany">
								<template #label>
									<WtmLabelTooltip label="失业保险单位" tooltip="失业保险单位缴费" />
								</template>
								<el-input-number v-model="searchData.UnemploymentCompany" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="InjuryCompany_FormItem" prop="InjuryCompany">
								<template #label>
									<WtmLabelTooltip label="工伤保险单位" tooltip="工伤保险单位缴费" />
								</template>
								<el-input-number v-model="searchData.InjuryCompany" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="MaternityCompany_FormItem" prop="MaternityCompany">
								<template #label>
									<WtmLabelTooltip label="生育保险单位" tooltip="生育保险单位缴费" />
								</template>
								<el-input-number v-model="searchData.MaternityCompany" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="HousingFundBase_FormItem" prop="HousingFundBase">
								<template #label>
									<WtmLabelTooltip label="公积金缴费基数" tooltip="公积金缴费基数" />
								</template>
								<el-input-number v-model="searchData.HousingFundBase" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="HousingFundPersonal_FormItem" prop="HousingFundPersonal">
								<template #label>
									<WtmLabelTooltip label="公积金个人" tooltip="公积金个人缴费" />
								</template>
								<el-input-number v-model="searchData.HousingFundPersonal" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="HousingFundCompany_FormItem" prop="HousingFundCompany">
								<template #label>
									<WtmLabelTooltip label="公积金单位" tooltip="公积金单位缴费" />
								</template>
								<el-input-number v-model="searchData.HousingFundCompany" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="PersonalTotal_FormItem" prop="PersonalTotal">
								<template #label>
									<WtmLabelTooltip label="个人合计" tooltip="个人缴费合计" />
								</template>
								<el-input-number v-model="searchData.PersonalTotal" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="CompanyTotal_FormItem" prop="CompanyTotal">
								<template #label>
									<WtmLabelTooltip label="单位合计" tooltip="单位缴费合计" />
								</template>
								<el-input-number v-model="searchData.CompanyTotal" clearable></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="Remark_FormItem" prop="Remark">
								<template #label>
									<WtmLabelTooltip label="备注" tooltip="备注说明" />
								</template>
								<el-input v-model="searchData.Remark" clearable></el-input>
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</template>
		</WtmSearcher>

		<div v-if="toolbar">
			<WtmButton
				v-auth="'/api/SysPersonSocialSecurityScheme/Add'"
				icon="fa fa-plus"
				type="primary"
				:button-text="$t('message._system.common.vm.add')"
				@click="OnCreateClick()"
			/>
			<WtmButton
				v-auth="'/api/SysPersonSocialSecurityScheme/BatchDelete'"
				icon="fa fa-trash"
				type="danger"
				:button-text="$t('message._system.common.vm.batchdelete')"
				:disabled="!hasSelectedRows"
				:confirm="$t('message._system.common.vm.deletetip')"
				@click="onBatchDelete()"
			/>
			<WtmButton
				v-auth="'/api/SysPersonSocialSecurityScheme/Import'"
				icon="fa fa-tasks"
				type="primary"
				:button-text="$t('message._system.common.vm.import')"
				@click="OnImportClick()"
			/>
			<WtmButton
				v-auth="'/api/SysPersonSocialSecurityScheme/SysPersonSocialSecuritySchemeExportExcel'"
				icon="fa fa-arrow-circle-down"
				type="primary"
				:button-text="$t('message._system.common.vm.export')"
				@click="onExport()"
			/>
		</div>

		<WtmTable ref="tableRef" v-bind="tableData" class="table-operation-area">
			<template #operation>
				<el-table-column :label="$t('message._system.common.vm.operate')" min-width="180" align="center" class-name="operation-column">
					<template v-slot="scope">
						<div class="operation-container">
							<WtmButton
								v-auth="'/api/SysPersonSocialSecurityScheme/Edit'"
								:is-text="true"
								icon="fa fa-pencil-square"
								type="warning"
								:button-text="$t('message._system.common.vm.edit')"
								@click="OnEditRowClick(scope.row)"
							/>
							<WtmButton
								v-auth="'/api/SysPersonSocialSecurityScheme/{id}'"
								:is-text="true"
								icon="fa fa-info-circle"
								type="info"
								:button-text="$t('message._system.common.vm.detail')"
								@click="OnDetailsRowClick(scope.row)"
							/>
							<WtmButton
								v-auth="'/api/SysPersonSocialSecurityScheme/BatchDelete'"
								icon="fa fa-trash"
								type="danger"
								:button-text="$t('message._system.common.vm.delete')"
								:confirm="$t('message._system.common.vm.deletetip')"
								:is-text="true"
								@click="onDelete(scope.row)"
							/>
						</div>
					</template>
				</el-table-column>
			</template>
		</WtmTable>
	</div>
</template>

<script setup lang="ts" name="社保方案;true;HengTong.Areas.Person.Controllers;SysPersonSocialSecurityScheme">
import ElMessage from 'element-plus/es/components/message/index';
import { defineAsyncComponent, reactive, ref, getCurrentInstance, onMounted, computed } from 'vue';
import { SysPersonSocialSecuritySchemeApi as api } from '/@/views/person/syspersonsocialsecurityscheme/api';
import { ISysPersonSocialSecuritySchemeView, ISysPersonSocialSecuritySchemeQuery } from '/@/views/person/syspersonsocialsecurityscheme/api/interface';
import other from '/@/utils/other';
import { IViewModel, ISysSelectType } from '/@/types/common';

const ci = getCurrentInstance() as any;
const loading = ref(false);
const CreateDialog = defineAsyncComponent(() => import('./create.vue'));
const EditDialog = defineAsyncComponent(() => import('./edit.vue'));
const DetailsDialog = defineAsyncComponent(() => import('./details.vue'));
const ImportDialog = defineAsyncComponent(() => import('./import.vue'));

const props = withDefaults(
	defineProps<{
		/** 是否显示搜索(筛选)栏 */
		searchBar?: boolean;
		/** 是否显示工具栏 */
		toolbar?: boolean;
		/** 是否禁用表格任何操作 */
		isDisabled?: boolean;
		/** 默认筛选 */
		filters?: ISysPersonSocialSecuritySchemeQuery;
		/** 主表ID */
		entityId?: string | null;
	}>(),
	{
		searchBar: true,
		toolbar: true,
		isDisabled: true,
		filters: () => ({}),
		entityId: null,
	}
);

const stateData = reactive({});

const searchData = ref<ISysPersonSocialSecuritySchemeQuery>({
	SchemeName: null,
	SchemeCode: null,
	PaymentArea: null,
	IsEnabled: null,
	SocialSecurityBase: null,
	PensionPersonal: null,
	PensionCompany: null,
	MedicalPersonal: null,
	MedicalCompany: null,
	UnemploymentPersonal: null,
	UnemploymentCompany: null,
	InjuryCompany: null,
	MaternityCompany: null,
	HousingFundBase: null,
	HousingFundPersonal: null,
	HousingFundCompany: null,
	PersonalTotal: null,
	CompanyTotal: null,
	Remark: null,
});

// 定义变量内容
const tableRef = ref();
const tableData = ref({
	// 列表数据（必传）s
	data: [],
	// 表头内容（必传，注意格式）
	header: [
		{ title: '方案名称', key: 'SchemeName', type: 'text', isCheck: true },
		{ title: '方案编码', key: 'SchemeCode', type: 'text', isCheck: true },
		{ title: '缴纳地区', key: 'PaymentArea', type: 'text', isCheck: true },
		{ title: '是否启用', key: 'IsEnabled', type: 'switch', isCheck: true },
		{ title: '社保缴费基数', key: 'SocialSecurityBase', type: 'text', isCheck: true },
		{ title: '养老保险个人', key: 'PensionPersonal', type: 'text', isCheck: true },
		{ title: '养老保险单位', key: 'PensionCompany', type: 'text', isCheck: true },
		{ title: '医疗保险个人', key: 'MedicalPersonal', type: 'text', isCheck: true },
		{ title: '医疗保险单位', key: 'MedicalCompany', type: 'text', isCheck: true },
		{ title: '失业保险个人', key: 'UnemploymentPersonal', type: 'text', isCheck: true },
		{ title: '失业保险单位', key: 'UnemploymentCompany', type: 'text', isCheck: true },
		{ title: '工伤保险单位', key: 'InjuryCompany', type: 'text', isCheck: true },
		{ title: '生育保险单位', key: 'MaternityCompany', type: 'text', isCheck: true },
		{ title: '公积金缴费基数', key: 'HousingFundBase', type: 'text', isCheck: true },
		{ title: '公积金个人', key: 'HousingFundPersonal', type: 'text', isCheck: true },
		{ title: '公积金单位', key: 'HousingFundCompany', type: 'text', isCheck: true },
		{ title: '个人合计', key: 'PersonalTotal', type: 'text', isCheck: true },
		{ title: '单位合计', key: 'CompanyTotal', type: 'text', isCheck: true },
		{ title: '备注', key: 'Remark', type: 'text', isCheck: true },
	],
	// 配置项（必传）
	config: {
		total: 0, // 列表总数
		loading: true, // loading 加载
		isSerialNo: true, // 是否显示表格序号
		isSelection: true, // 是否显示表格多选
		isOperate: props.isDisabled, // 是否显示表格操作栏
	},
});
// 初始化表格数据
const getTableData = async () => {
	try {
		await tableRef.value.doSearch(api().search, searchData.value);
	} catch (error) {
		other.setFormError(ci, error);
	}
};
const OnCreateClick = () => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.add'), CreateDialog, null, getTableData);
};

const OnEditRowClick = (row: ISysPersonSocialSecuritySchemeView) => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.edit'), EditDialog, row, getTableData);
};

const OnDetailsRowClick = (row: ISysPersonSocialSecuritySchemeView) => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.detail'), DetailsDialog, row, getTableData);
};

// 删除
const onDelete = (row: ISysPersonSocialSecuritySchemeView) => {
	const ids = [row.ID] as (string | number)[];
	api()
		.delete(ids)
		.then(() => {
			getTableData();
		});
};

//批量删除
const onBatchDelete = async () => {
	const selectedRows = tableRef.value?.getSelectedRows();
	const selectedIds = selectedRows?.map((x: ISysPersonSocialSecuritySchemeView) => x.ID) as (string | number)[];
	if (selectedIds && selectedIds.length > 0) {
		try {
			await api().delete(selectedIds);
			// 先清除选择状态
			tableRef.value?.clearSelection();
			// 再重新获取数据
			getTableData();
		} catch (error) {
			ElMessage.error(ci.proxy.$t('message._system.common.vm.error'));
		}
	} else {
		ElMessage.error(ci.proxy.$t('message._system.common.vm.check'));
	}
};
// 添加计算属性判断是否有选中行
const hasSelectedRows = computed(() => {
	const selectedRows = tableRef.value?.getSelectedRows() || [];
	return selectedRows.length > 0;
});

const OnImportClick = () => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.import'), ImportDialog, null, getTableData);
};

const onExport = () => {
	const selected = tableRef.value.getSelectedRows();
	if (selected.length > 0) {
		api().exportById(selected.map((x: any) => x.ID));
	} else {
		api().export({});
	}
};

// 页面加载时
onMounted(() => {
	loading.value = true;
	const promises: Promise<any>[] = [getTableData()];
	Promise.allSettled(promises).finally(() => {
		loading.value = false;
	});
});
</script>
